<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航条</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        /* 设置nav的大小 */
        .nav {
            width: 1210px;
            height: 48px;
            background-color: #e8e7e3;
            margin: 100px auto;
            /* 背景颜色 */
        }

        .nav li {
            float: left;
            /* 一般设置都是向左 */
            /* 以使菜单横向排列 */
            /* li是浮动  宽 高由里面的内容决定 */
            height: 100%;
            line-height: 48px;
            /* 让元素在父元素中垂直居中 */
            /* nav的高度和行高一样 这样就垂直居中了 */
            height: 100%;
        }

        /* 设置a的样式 */
        .nav a {
            display: block;
            /*转成块*/
            text-decoration: none;
            /*去除下划线*/
            color: #777777;
            font-size: 16px;
            padding: 0 39px;



            /* 把元素分开 */
            /* 宽度给li a？ */
            /* 给li a的大小 乱了 a的大小就是文字的大小 */
            /* 宽度给a a整个就是a  这个区域就是超链接 */
            /* 那个整个区域就是超链接 */
            /* 希望整个是个a元素  但是实际情况是a比较小  意味着要去修改a元素  */
            /* 但a元素是无法修改的 */
            /* 把a转换成块元素  并不会纵向排列 */
            /* a的父元素是li li以及浮动了  a只是在li中纵向排列 */


        }
        .nav a:hover{
            background-color: #3f3f3f;
            color: #e8e7e3;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li> <a href="#">html/css</a></li>
        <li> <a href="#">browser side</a></li>
        <li> <a href="#">server side</a></li>
        <li> <a href="#">programming</a></li>
        <li> <a href="#">xml</a></li>
        <li> <a href="#">web building</a></li>
        <li> <a href="#">refering</a></li>
        <!-- a本身是个行内不会垂直排列 -->
        <!-- 垂直排列的是a的父元素  就是li  -->
    </ul>
</body>

</html>